<template>
	<view class="page">
		<view class="my_padding">
			<view class="my_body">
				<div class="title-top">
					<div class="user_border">
						<div class="userInfo" style="display: flex; align-items: center;">
							<!-- <view class="uni-media-list-logo phto">
								<image :src="avatar" :lazy-load="true" style="border-radius: 12px; border:1px solid #CCC; background: #FFF;" />
							</view> 
							<view class="nickname">{{ userinfo.nickname }}</view>	-->
							<view class="mydata">
								<view class="item">
									<p class="item_p">{{ usercoin }}</p>
									<p class="item_tit">余额（元）</p>
								</view>
								<view class="item">
									<p class="item_p">{{ userinfo.wait_money }}</p>
									<p class="item_tit">订阅总额（元）</p>
								</view>
								<view class="item">
									<p class="item_p">{{ userinfo.jifen }}</p>
									<p class="item_tit">积分</p>
								</view>
							</view>
						</div>
						<view class="order_recode" @click="navToUrl('/pages/invest/orders')">订单记录</view>
					</div>
				</div>
				
				<view class="tab-bar" v-for="(item, index) in prodList" :key="index" @click="navToUrl('/pages/invest/detail?id='+item.id)">
					<view class="info_bg"></view>
					<view class="prod">
						<view class="pic_box">
							<image class="prod_img" :src="weburl + item.img" mode="scaleToFill"></image>
							<!-- <view class="prod_label">{{ item.classname }}</view> -->
						</view>
						<view class="prod_contain">
							<view class="pr_name">{{ item.title }}</view>
							<view class="pr_price">金额：<span>￥{{ item.min }}</span></view>
							<view class="pr_date_tit">开放时间：{{ item.time }}</view>
							<view class="pr_period">周期：{{ item.day }}天</view>
						</view>
					</view>
					
					<view class="label_list">
						<view class="la_item">￥{{ item.rate }}/天</view>
						<view class="la_item">{{ item.day_jifen }}积分/天</view>
						<view class="la_item">送{{ item.givejifen }}积分</view>
					</view>
					
					<view class="prod_order">
						<!-- <view class="prod_day">产品周期 {{ item.day }} 天</view> -->
						<view class="to_order" @click="toOrder( item.id )">马上认购</view>
					</view>
				</view>
				
			</view>
		</view>


		<!-- <tabBar :currentPage="currentPage"></tabBar> -->
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				currentPage: '/pages/user/person',
				ifOnShow: false,
				unit: '',
				usercoin: 0,
				class_id: 0,
				prodList:[]
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onLoad: function(option) {
			this.class_id = option.class_id
			// this.helper.checkLogin();
			this.loadImg();
			this.getInfoSet();
			this.getData();
			this.loadPersonNav();
			this.getInvestList();
		},
		methods: {
			tabBarChange(val){
				this.navToUrl(this.testList2[val.detail.index].url)
			},
			tabBarChange1(val){
				this.navToUrl(this.testList1[val.detail.index].url)
			},
			loadImg: function() {
				var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
				// this.user_bg = this.weburl+'/storage/upload/user_bg.png?k='+range;
				// this.avatar = this.weburl + '/storage/upload/icon_avatar.png?k=' + range;
				this.avatar = '/static/default.png'
			},
			getInfoSet: function() {
				//获取基础参数
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['key=unit', 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getInfoSet",
					timestamp: timestamp,
					data: {
						key: 'unit'
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					this.unit = res.data.data.value;
				})
			},
			//user数据
			getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title: "数据加载中",
				// 	mask: true
				// })
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username=' + info.username, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						// console.log('userInfo参数:', this.userinfo)
						this.userinfo = res.data.data.userinfo;
						if (this.userinfo.avatar) {
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						console.log('info:',info)
						this.usercoin = (parseFloat(this.userinfo.money) + parseFloat(this.userinfo.balance)).toFixed(2)
					})
				} else {
					uni.hideLoading();
				}
			},
			//跳转url List
			loadPersonNav: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title: "数据加载中",
				// 	mask: true
				// })
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "getPersonNav",
						timestamp: timestamp,
						data: {
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						// console.log('url：', res.data.data.list)
						this.list = res.data.data.list;

						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				} else {
					uni.hideLoading();
				}
			},
			getInvestList: function(){
				var info = uni.getStorageSync("userinfo");
				var class_id = this.class_id;
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token=' + info.token, 'timestamp=' +
						timestamp, 'classid=' + class_id
					]);
					this.helper.req({
						api: "getInvestIndex",
						timestamp: timestamp,
						data: {
							token: info.token,
							classid: class_id
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						this.prodList = res.data.data.projectItems
						console.log('investList:', this.prodList)
					})
				}
			},
			dorefresh: function() {
				this.getData();
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			toOrder: function(id){
				return uni.navigateTo({
					url: '/pages/invest/detail?id='+id
				});
			}
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 3.46667vw;
		min-width: 325px;
		color: #56595d;
		background-color: #ddeafd;
	}
	.user_border{
		width: 100vw;
		// margin-left: 2vw;
		height: 44vw;
		// background: #222;
		border-radius: 10px;
		position: relative;
		//background-image: url('@/static/images/invest-banner.png');
		//background-size: 100vw 44vw;
		//background-repeat: no-repeat;
	}
	.userInfo{
		width: 96vw;
		margin-left: 2vw;
		height: 100px;
		// background: #fff;
		border-radius: 8px 8px 4px 4px;
		position: relative;
	}
	.nickname{
		width: 100px;
		line-height: 20px;
		color:#333;
		font-size: 16px;
		font-weight: bold;
		position: absolute;
		top: 20px;
		left: 100px;
	}
	
	.mydata{
		width: 90vw;
		height: 50px;
		position: absolute;
		top: 50px;
		left: 5vw;
	}
	.mydata .item{
		width: 33%;
		line-height: 20px;
		float: left;
		text-align: center;
	}
	.item_p{
		font-weight: bold;
		color:#fff;
		font-size: 18px;
		line-height: 30px;
	}
	.item_tit{
		color:#fff;
		font-size: 14px;
		line-height: 30px;
	}
	
	.order_recode{
		width: 90vw;
		line-height: 36px;
		font-size: 14px;
		background-color: #80c1f5;
		color:#fff;
		position: absolute;
		bottom: 5vw;
		left: 5vw;
		text-align: center;
		border-radius: 20px;
	}
	

	.user-section {
		height: 500upx;
		position: relative;
	}

	.user-info-box {
		height: 278upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		z-index: 1;
		padding: 50upx 30upx 0;
	}

	.user-info-box .portrait-box {
		position: absolute;
		left: 40upx;
	}

	.user-info-box .portrait {
		width: 120upx;
		height: 120upx;
		border-radius: 50%
	}

	.user-info-box .info-box {
		margin-left: 120upx;
		;
	}


	.cu-list.menu>.cu-item {
		color: #333
	}

	.cu-list.menu>.cu-item .content {
		font-size: 28upx
	}

	.cu-list.menu>.cu-item .content uni-text[class*=cuIcon] {
		width: auto;
		font-size: 28upx
	}

	.cu-list.grid>.cu-item uni-text {
		font-size: 28upx;
		color: #333
	}

	.icon_task {
		width: 100upx;
		height: 100upx;
		margin: 0 auto;
	}

	uni-button {
		font-size: 24upx;
		padding: 0 60upx;
	}

	.icon_nav {
		width: 50%;
		margin: 0 auto;
	}

	.cuIcon-refresh {
		position: absolute;
		right: 20upx;
		z-index: 999;
	}

	uni-button.line-red::after {
		border: 1px solid;
	}

	.cu-list.grid.no-border {
		padding: 0;
	}
</style>
<!-- index -->
<style lang="scss" scoped>
	.inviteBanner {
		background-color: #cccccc;
		/* border-radius: 3.2vw; */
		border-radius: 15vw;
		margin: 3.33333vw auto 0;
		width: 97vw;
		height: 199upx;
		// background-image: url(@/static/images/qr_bg.png);
		background-image: url(@/static/images/sports_top.png);
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;

		.inviteBanner-txt {
			color: #fff;
			font-weight: 700;
			font-size: 9.8vw;
			font-family: Arial, Helvetica, sans-serif;
			padding-left: 12vw;
		}
	}

	.tab-bar-footer {
		
		background-color: #fff;
		border-radius: 3.2vw;
		margin: 3vw auto 0;
		    margin-bottom: 60px;
			padding: 16px 0;
		width: 96vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
	}

	.tab-bar {
		padding: 10px 0 0;
		// background-color: #fff;
		border-radius: 3.2vw;
		margin: 3vw auto 0;
		width: 96vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
		position: relative;
		
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #8cabfe;
			opacity: 0.3;
			border-radius:10px;
		}
	}
	.tab-bar .prod{
		width: 94%;
		margin: 2px 3%;
		height: 150px;
		border-bottom: 1px solid #f8f8f8;
		position: relative;
	}
	.pic_box{
		width: 100px;
		height: 84px;
		position: absolute;
		top: 6px;
		left: 0;
	}
	.prod_img{
		width: 100px;
		height: 100px;
		border-radius: 4px 4px 0 0;
	}
	.prod_label{
		width: 100px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		background-color: #AAA;
		color:#fff;
		opacity: 0.6;
		border-radius: 0 0 4px 4px;
	}
	
	.prod_contain{
		position: absolute;
		top: 0;
		left: 110px;
		width: 240px;
		padding-top: 2px;
	}
	.pr_name{
		width: 240px;
		height: 22px;
		line-height: 22px;
		font-size: 15px;
		padding-top: 4px;
		color: #fff;
		overflow: hidden;
	}
	.pr_price{
		// width: 60px;
		position: absolute;
		top: 36px;
		color: #fff;
		font-size: 14px;
		span{
			color:#ffbb2d;
			font-size: 16px;
		}
	}
	.pr_date_tit{
		position: absolute;
		top: 62px;
		color: #fff;
		font-size: 14px;
	}
	.pr_period{
		position: absolute;
		top: 86px;
		color: #fff;
		font-size: 14px;
	}
	
	.label_list{
		position: absolute;
		top: 126px;
		left: 20px;
	}
	.la_item{
		padding: 4px 20px;
		background: #39a6f1;
		color:#FFF;
		border-radius: 12px;
		margin-right: 20px;
		float:left;
	}
	.la_item:last-child{
		margin-right: 0;
	}
	.prod_order{
		line-height: 30px;
		padding: 6px 10px;
		height: 45px;
	}
	.prod_day{
		width: 140px;
		height: 30px;
		line-height: 20px;
		float:left;
	}
	.to_order{
		// width: 70px;
		padding: 6px 30px;
		line-height: 20px;
		background: linear-gradient( 180deg, #4EA3FF 0%, #3268FF 100%);
		border-radius: 20px;
		color:#fff;
		font-size: 14px;
		float:right;
		margin-right: 0;
	}

	.assetData {
		width: 100%;
		margin-top: 16px;
		border-radius: 15px;
		.uni-grid-item{
			height: 66px !important;
		}
	}

	.grid-item-box span {
		display: block;
		text-align: center;
	}
	
	.grid-item-box .number{
		color:#fe8f27;
		font-size: 18px;
		font-weight: bold;
	}
	.grid-item-box .price{
		color:#fea829;
		font-size: 16px;
		font-weight: bold;
	}

	.iconfonts {
		position: absolute;
		right: 160rpx;
		bottom: 0px;
		font-size: 16px;
	}

	.header-msg {
		padding-left: 10px;
	}

	.phto {
		width: 106upx;
		height: 106upx;
		margin-left: 30 upx;
		margin-right: 30 upx;
	}

	.list {
		margin-top: 10upx;
	}

	.qrcode {
		width: 50 upx;
		height: 50 upx;
		margin-right: -20 upx;
	}

	.my_padding {
		/* padding: 50px 15px 16px 15px; */
		/* padding: 12px; */
		/* display: flex; */
		background-color: #0D1A44;
		// min-height: 700px;
		// background-image: url('@/static/images/person/center-bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		min-height: 220vw;
	}

	.uni-media-list-logo {
		padding: 2px;
		border-radius: 6px;
		height: 70px !important;
		width: 70px !important;
		margin-right: 0px !important;
		margin-left: 10px !important;
	}

	/* 	.my_padding:after {
		font-family: uniicons;
		content: '\e583';
		position: absolute;
		right: 15px;
		top: 15%;
		font-size: 24px;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	} */

	.title-top {
		padding-top: 4px;
		// padding-left: 20px;
		// box-sizing: border-box;
		// border-radius-left-bottom: 15px;
		// border-radius-right-bottom: 15px;
		// border-radius: 12px;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		// position: relative;
		
		width: 100%;
		height: min(165px, 400px);
		position: relative;
		// background: linear-gradient(to right, #ff5e3e 0, #ff1679 100%);
	}

	.header-erw {
		position: absolute;
		right: 45px;
		top: 13%;
		font-size: 24px;
		width: 24px;
		height: 24px;
		z-index: 9999;
	}

	.uni-list {
		margin-bottom: 30 upx;
	}

	.uni-list-cell-navigate.uni-navigate-right:after {
		font-size: 20px !important;
	}

	.header-msg-bottom {
		color: #333;
		font-size: 5vw;
		font-weight: 600;
		line-height: 5vw;
	}

	.header-msg-top {
		line-height: 1;
		font-weight: 400;
		font-size: 3.8vw;
		margin-top: 2.4vw;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.my_score{
		position: absolute;
		height: 20px;
		right: 50px;
		top: 78px;
		padding: 2px 6px;
		background-color: #fff;
		color:#fea829;
		border-radius: 10px;
	}
</style>
<!-- uni-grid -->
<style lang="scss" scoped>
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		margin-top: 10upx;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>